<template>
  <div class="hello">
    <el-row>
      <el-col :xs="11" :sm="11" :md="12" :lg="14">
        <div class="grid-content"></div>
      </el-col>
      <el-col :xs="12" :sm="11" :md="10" :lg="6">
        <div class="grid-content bg-purple-light">
          <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="card-box login-form">
            <h3 class="title"><img src="" />云南道路桥梁协会后台管理系统</h3>
            <el-form-item prop="username">
              <span class="svg-container">
                <icon-svg icon-class="terminal"></icon-svg>
              </span>
              <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="手机号" :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item prop="userpassword">
              <span class="svg-container">
                <icon-svg icon-class="mima1"></icon-svg>
              </span>
              <el-input name="userpassword" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.userpassword" autoComplete="off" placeholder="密码" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="loginBtn" :loading="loading" @click.native.prevent="handleLogin">
                登录
              </el-button>
            </el-form-item>
            <div class="tips">{{tips}}</div>
          </el-form>
        </div>
      </el-col>
      <el-col :xs="1" :sm="2" :md="2" :lg="4">
        <div class="grid-content"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      
    }
  }
}


</script>

<style scoped>
.cl1{
  width: 100px;
  height:100px;
  background-color: red;
}
.cl2{
  width: 100px;
  height:100px;
  background-color: blue;
}

h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

</style>
